<!DOCTYPE html>
<!-- saved from url=(0059)file:///Users/xiaojianjin/Desktop/lei/jsdifflib%20demo.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<title>文本比较 demo</title>
	<link rel="stylesheet" type="text/css" href="./jsdifflib demo_files/diffview.css">
	<script type="text/javascript" src="./jsdifflib demo_files/diffview.js"></script>
	<script type="text/javascript" src="./jsdifflib demo_files/difflib.js"></script>
<style type="text/css">
body {
	font-size: 12px;
	font-family: Sans-Serif;
}
h2 {
	margin: 0.5em 0 0.1em;
	text-align: center;
}
.top {
	text-align: center;
}
.textInput {
	display: block;
	width: 49%;
	float: left;
}
textarea {
	width:100%;
	height:300px;
}
label:hover {
	text-decoration: underline;
	cursor: pointer;
}
.spacer {
	margin-left: 10px;
}
.viewType {
	font-size: 16px;
	clear: both;
	text-align: center;
	padding: 1em;
}
#diffoutput {
	width: 100%;
}
</style>

<script type="text/javascript">

function diffUsingJS(viewType) {
	"use strict";
	var byId = function (id) { return document.getElementById(id); },
		base = difflib.stringAsLines(byId("baseText").value),
		newtxt = difflib.stringAsLines(byId("newText").value),
		sm = new difflib.SequenceMatcher(base, newtxt),
		opcodes = sm.get_opcodes(),
		diffoutputdiv = byId("diffoutput"),
		contextSize = byId("contextSize").value;

	diffoutputdiv.innerHTML = "";
	contextSize = contextSize || null;

	diffoutputdiv.appendChild(diffview.buildView({
		baseTextLines: base,
		newTextLines: newtxt,
		opcodes: opcodes,
		baseTextName: "Base Text",
		newTextName: "New Text",
		contextSize: contextSize,
		viewType: viewType
	}));
}

</script>
</head>
<body>
	<h1 class="top"><a href="http://github.com/cemerick/jsdifflib">文档对比</a> demo</h1>
	<div class="top">
		<strong>上下文大小（可选）</strong> <input type="text" id="contextSize" value="">
	</div>
	<div class="textInput">
		<h2>旧文本</h2>
		<textarea id="baseText"></textarea>
	</div>
	<div class="textInput spacer">
		<h2>新文本</h2>
		<textarea id="newText"></textarea>
	</div>
	<div class="viewType">
		<input type="radio" name="_viewtype" id="sidebyside" onclick="diffUsingJS(0);"> <label for="sidebyside">并排比较差异</label>
		&nbsp; &nbsp;
		<input type="radio" name="_viewtype" id="inline" onclick="diffUsingJS(1);"> <label for="inline">串联比较差异</label>
	</div>
	<div id="diffoutput"></div>


</body></html>